<template>
  <div class="boxHome">
    <div class="top">
      <div class="userInFo">
        <el-avatar :size="100" :src="userInfo.avatar"></el-avatar>
        <div class="titlePc">
          <div>{{userInfo.nikeName}}</div>
          <div>{{userInfo.MyCommentCount}}<span>论坛</span>{{userInfo.beLikedNumber}}<span>获赞</span></div>

        </div>
        <div class="userButtom">
          <div>个性签名：{{userInfo.nikeName}}</div>
          <div>IP属地：{{userInfo.realAddressByIP}}</div>
        </div>
      </div>
      <el-tabs v-model="activeName" :stretch="true">
        <el-tab-pane label="他的帖子" name="first"></el-tab-pane>
<!--        <el-tab-pane label="被阅的卷子" name="second"></el-tab-pane>-->
        <el-tab-pane label="他的评论" name="third"></el-tab-pane>
      </el-tabs>

    </div>
    <div class="bottom">
      <community-pc v-if="activeName=='first'"></community-pc>
<!--      <reviewed-pc v-if="activeName=='second'"></reviewed-pc>-->
      <my-comment-pc v-if="activeName=='third'"></my-comment-pc>
    </div>

  </div>
</template>
<script>
import {getHomePageInfo} from "@/api/homePgae";
import {mapGetters} from "vuex";
import CommunityPc from '@/views/community/components/pc.vue'
import ReviewedPc from "@/views/markingPapers/Q&Aarea/ReviewedPc.vue";
import MyCommentPc from "@/views/personalHomepage/components/myComment/myCommentPc.vue";

export default {
  components: {
    CommunityPc,
    ReviewedPc,
    MyCommentPc
  }
  ,
  data() {
    return {
      userInfo: {},
      activeName: 'first',
    }

  },
  computed: {
    ...mapGetters(["name", 'userId']),
  },
  mounted() {
    this.getUserInfo()
  }
  ,
  methods: {
    getUserInfo() {
      console.log(this.$route.query.userId,'他人主页')
      getHomePageInfo({userId: this.$route.query.userId}).then(res => {

        this.userInfo = res

      })
    },
  }
}
</script>
<style lang="scss" scoped>
.boxHome {
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: #f1f2f5;
  padding: 15px;

  > .top {
    height: 300px;
    padding: 0 15px;
    background-color: white;
    overflow: hidden;

    > .userInFo {
      height: 200px;
      position: relative;
      margin-top: 50px;
      padding-top: 15px;

      > .el-avatar {
        position: absolute;
        left: 15px;
        top: -35px;
        border: 3px white solid;
      }

      > .titlePc {
        margin-left: 130px;

        > div:nth-of-type(1) {
          font-size: 20px;
          font-weight: bold;
        }

        > div:nth-of-type(2) {
          margin-top: 5px;
          font-size: 16px;
          font-weight: bold;

          > span {
            margin: 0 15px 0 5px;
            font-size: 14px;
            font-weight: normal;
          }
        }

      }

      > .userButtom {
        padding: 0 15px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);

        > div {
          margin: 15px 0;
        }
      }
    }
  }

  > .bottom {
    background-color: white;

  }
}
</style>
